
<template>
  <div class="page">
    <div class="logo">
      Torrent Manager
    </div>
    <div class="back-wrap"></div>
    <div class="dcenter">
      <a-input-password size="large" v-model:value="form.passkey" @pressEnter="doAuth">
        <template #prefix><LockOutlined style="color:rgba(0,0,0,.25)"/></template>
      </a-input-password>
      <p class="forget-btn">
        <a-button type="link" size="small" style="color:#fff;" @click="forgot">忘记密码?</a-button>
			</p>
    </div>
  </div>
</template>


<script>  
import { LockOutlined, LoginOutlined } from '@ant-design/icons-vue'
import store from '../store';
import AuthApi from '../api/AuthApi.js';

export default {
  name: 'Login',
  components: {
    LockOutlined,
    LoginOutlined
  },
  data() {
    return {
      form: {}
    }
  },
  mounted (){
    const token = store.state.token
    AuthApi.check().then(response=>{
      if (response.data.code === 1) {
        store.setAuthedAction(true)
        if (store.state.isMobile) {
          this.$router.replace({
            path: "/m"
          });
        } else {
          this.$router.replace({
            path: "/index"
          });
        }
      }
    }).catch(e => {
      this.$message.error(`认证失败：${e.message}`)
    })
  },
  methods: {
    doAuth() {
      if (this.form.passkey) {
        AuthApi.doAuth(this.form).then(response=>{
          if (response.data.code === 1) {
            store.setTokenAction(response.data.data)
            store.setAuthedAction(true)
            if (store.state.isMobile) {
              this.$router.replace({
                path: "/m"
              });
            } else {
              this.$router.replace({
                path: "/index"
              });
            }
          } else {
            this.$message.error(`认证失败：${response.data.message}`)
          }
        }).catch(e => {
          this.$message.error(`认证失败：${e.message}`)
        })
      }
    },
    forgot() {
      alert('开发中')
    }
  }
}
</script>
<style scoped>
.page {
  width: 100%;
  height: 100%;
  background-color: #000;
}
.back-wrap {
  width: 100%;
  height: 80%;
  background-color: #f15a2c;
  background: -webkit-gradient(linear,left top,right top,from(#e22828),to(#ff8c2f));
  background: linear-gradient(90deg,#e22828,#ff8c2f);
  transform:skewY(-5deg);
  -ms-transform:skewY(-5deg); /* IE 9 */
  -webkit-transform:skewY(-5deg); /* Safari and Chrome */
  transform-origin: left;
  -ms-transform-origin: left;
  -webkit-transform-origin: left;
}
.logo {
  position: absolute;
  top: 20px;
  left: 20px;
  line-height: 31px;
  color: #fff;
  font-weight: bolder;
  font-size: 30px;
  width: 320px;
  height: 31px;
  z-index: 2;
}
.dcenter {
  width: 300px;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.forget-btn {
  text-align: right;
}
</style>